<template>
  <view class="multilingual">
    <up-popup :show="isShowPoup" @close="close" closeOnClickOverlay round="20">
      <view class="popup">
        <view class="header">
          <view class="title"> {{ $t("common.switchLanguages") }} </view>
          <view class="selected" @click="setLocale">
            <!-- <image src="/static/login/tick.png" mode="" /> -->
            <!-- <text style="color: #64b7f6">{{ $t("common.areYouSure") }}</text> -->
          </view>
        </view>
        <view class="locale-list">
          <view
            class="locale-item"
            v-for="(item, index) in locales"
            :key="index"
            @tap="onLocaleChange(item)"
          >
            <view
              class="locale-item"
              :class="
                applicationLocale == item.code ? 'locale-item-active' : ''
              "
            >
              {{ item.text }}
            </view>
          </view>
        </view>
      </view>
      <safe-area-insets-bottom></safe-area-insets-bottom>
    </up-popup>
  </view>
</template>

<script>
import { useLocaleStore } from "@/store/locale";
// import { useI18n } from "vue-i18n";
// const { t } = useI18n();

export default {
  data() {
    return {};
  },
  props: {
    applicationLocale: {
      type: String,
      default: () => "",
    },
    isShowPoup: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    locales() {
      return [
        {
          text: "中文",
          code: "zh-Hans",
        },
        {
          text: "English",
          code: "en",
        },
        // {
        //   text: '日本語',
        //   code: "ja",
        // },
        // {
        //   text: 'Italiano',
        //   code: "it",
        // },
      ];
    },
  },
  methods: {
    close() {
      this.$emit("handleClose", false);
    },
    onLocaleChange(e) {
      const store = useLocaleStore();
      const { SetAppLocale } = store;
      // iOS设备特殊处理
      if (uni.getSystemInfoSync().platform == "ios") {
        uni.showModal({
          title: this.$t("common.permissionPrompts"),
          content: this.$t("common.content"),
          confirmText: this.$t("common.confirm"),
          cancelText: this.$t("common.cancel"),
          success: (res) => {
            if (res.confirm) {
              this.$i18n.locale = e.code;
              SetAppLocale(e.code);
              this.$emit("handleClose", false);
              plus.runtime.restart();
            }
          },
        });
      } else {
        this.$i18n.locale = e.code;
        SetAppLocale(e.code);
        this.$emit("handleClose", false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.multilingual {
  width: 100%;

  .popup {
    width: 100%;
    max-height: 50vh;
    overflow-y: scroll;

    .header {
      width: 100%;
      position: relative;
      text-align: center;
      padding: 30rpx 56rpx;
      box-sizing: border-box;

      .title {
        font-family: Alibaba PuHuiTi 3;
        font-size: 34rpx;
        font-weight: 500;
        font-variation-settings: "opsz" auto;
        /* 白 */
        color: #ffffff;
      }

      .selected {
        position: absolute;
        top: 30rpx;
        right: 56rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }

        text {
          font-family: Alibaba PuHuiTi 3;
          font-size: 28rpx;
          font-weight: 500;
          font-variation-settings: "opsz" auto;
          font-feature-settings: "kern" on;
          /* 白 */
          color: #ffffff;
        }
      }
    }

    .locale-list {
      width: 520rpx;
      margin: 0 auto;

      .locale-item {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background-color: #132034;
        font-size: 32rpx;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
        border: 1rpx solid #1f3651;
        border-radius: 50rpx;
        margin-bottom: 30rpx;
      }

      .locale-item-active {
        background-color: $locale-background-color;
      }
    }
  }
}
</style>
